
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/tutor/template/main.xhtml">

	<ui:define name="body">
		<h:form prependId="false">

			<p:fieldset legend="#{messages['mensagem.label']}" toggleable="true"
				toggleSpeed="500">
				<h:panelGrid id="fields" columns="3">

					<h:outputLabel value="#{messages['acompanhamento.label.turma']}: "
						for="turma" styleClass="text-input" />
					<h:selectOneMenu id="turma" style="width:300px;" required="true"
						value="#{mensagemEditMB.turma}" converter="turmaConverter">
						<f:selectItem itemLabel="Selecione turma" itemValue="-1" />
						<f:selectItems value="#{mensagemEditMB.turmas}" var="turma"
							itemLabel="#{turma.codigo}" itemValue="#{turma}" />

						<f:ajax execute="alunos" render="alunos grupos"
							listener="#{mensagemEditMB.changeTurma()}" />

					</h:selectOneMenu>
					<p:message for="turma" />

					<h:outputLabel value="#{messages['mensagem.label.grupo']}: "
						for="grupos" styleClass="text-input" />
					<p:selectCheckboxMenu id="grupos" label="Grupos"
						value="#{mensagemEditMB.grupos}" panelStyle="width:220px">
						<f:attribute name="collectionType" value="java.util.ArrayList" />
						<f:selectItems value="#{mensagemEditMB.turma.grupos}" 
							var="grupo" itemLabel="#{grupo.nome}" itemValue="#{grupo}" />
						<p:ajax event="change" process="turma @this alunos" update="alunos"
							listener="#{mensagemEditMB.grupoSelected()}" />
					</p:selectCheckboxMenu>
					<p:message for="grupos" />

					<h:outputLabel value="#{messages['acompanhamento.label.aluno']}: "
						for="alunos" styleClass="text-input" />
					<p:dataTable id="alunos" value="#{mensagemEditMB.alunosTableModel}" var="aluno"
						selection="#{mensagemEditMB.alunosSelecionados}">
						<f:facet name="header">Alunos Destinatários</f:facet>
						<p:column selectionMode="multiple" style="width:2%" />
						<p:column headerText="ID" style="width:2%">
							<h:outputText value="#{aluno.id}" />
						</p:column>
						<p:column headerText="Aluno">
							<h:outputText value="#{aluno.usuario.nome}" />
						</p:column>
					</p:dataTable>
					<p:message for="alunos" />

					<h:outputLabel value="#{messages['mensagem.label.assunto']}: "
						for="assunto" styleClass="text-input" />
					<h:inputText id="assunto"
						value="#{mensagemEditMB.bean.assunto}" required="true"
						style="width:300px;" maxlength="100"/>
					<p:message for="assunto" />

					<h:outputLabel value="#{messages['mensagem.label.mensagem']}: "
						for="mensagem" styleClass="text-input" />
					<p:editor id="mensagem" value="#{mensagemEditMB.bean.mensagem}"
						width="600" height="150" required="true" />
					<p:message for="mensagem" />
				</h:panelGrid>

				<div class="ui-messages-info ui-corner-all" style="font-size: 10px;">
					<span class="ui-messages-info-icon"></span>
					#{messages['mensagem.label.instrucoes']}
				</div>
			</p:fieldset>

			<br />

			<p:toolbar>
				<p:toolbarGroup align="left">
						
						
						
					<p:commandButton value="#{messages['button.enviar']}"
						action="#{mensagemEditMB.enviar}" ajax="false" />
						
						
					<p:button value="#{messages['button.back']}"
						outcome="mensagem_list" />
				</p:toolbarGroup>
			</p:toolbar>

		</h:form>

		<script type="text/javascript">
			function teste() {
				if($('#grupo').val() != 'Selecione grupo') {
					$('#alunos').prop('disabled', 'disabled');
				}
				else {
					$('#alunos').prop('disabled', false);
				}				
			}
		</script>

	</ui:define>
</ui:composition>